﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>排班计划管理</title>
    <link rel="stylesheet" href="~/scripts/layui-v2.5.6/layui/css/layui.css">
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
</head>
<body>
<style>
    .container {
        padding: 15px;
        background-color: #f2f2f2;
    }
    .content {
        background-color: #fff;
        padding: 15px;
        border-radius: 2px;
    }
    .search-form {
        margin-bottom: 15px;
        padding: 15px;
        background-color: #f8f8f8;
        border-radius: 2px;
    }
    .toolbar {
        margin-bottom: 15px;
    }
    .auto-generate-switch {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
    }
    .switch-text {
        font-size: 12px;
        color: #666;
    }
    .switch-toggle {
        position: relative;
        width: 40px;
        height: 20px;
        background-color: #ccc;
        border-radius: 10px;
        transition: background-color 0.3s ease;
    }
    .switch-toggle.active {
        background-color: #5fb878;
    }
    .switch-circle {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.3s ease;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .switch-toggle.active .switch-circle {
        transform: translateX(20px);
    }
</style>

<div class="container">
    <div class="content">
        <!-- 搜索栏 -->
        <div class="search-form">
            <div class="layui-form" lay-filter="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">班组类型</label>
                        <div class="layui-input-inline">
                            <select name="searchShiftType" id="searchShiftType">
                                <option value="">请选择班组类型</option>
                                <option value="注塑">注塑</option>
                                <option value="机加工">机加工</option>
                                <option value="组装">组装</option>
                                <option value="仓库">仓库</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">计划编号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="searchPlanCode" placeholder="请输入计划编号" autocomplete="off" class="layui-input" id="searchPlanCode">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">计划名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="searchPlanName" placeholder="请输入计划名称" autocomplete="off" class="layui-input" id="searchPlanName">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">开始日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="searchStartDate" placeholder="请选择开始日期" autocomplete="off" class="layui-input" id="searchStartDate">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">结束日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="searchEndDate" placeholder="请选择结束日期" autocomplete="off" class="layui-input" id="searchEndDate">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" id="searchBtn"><i class="layui-icon layui-icon-search"></i> 搜索</button>
                        <button type="button" class="layui-btn layui-btn-primary" id="resetBtn"><i class="layui-icon layui-icon-refresh"></i> 重置</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 工具栏 -->
        <div class="toolbar">
            <button type="button" class="layui-btn" id="addBtn"><i class="layui-icon layui-icon-add-1"></i> 新增</button>
            <button type="button" class="layui-btn layui-btn-danger" id="deleteBtn"><i class="layui-icon layui-icon-delete"></i> 删除</button>
        </div>

        <!-- 数据表格 -->
        <table id="shiftplanningTable" lay-filter="shiftplanningTable"></table>
    </div>
</div>

<!-- 表格操作列模板 -->
<script type="text/html" id="tableBar">
    {{# if(d.documentStatus !== '已确认'){ }}
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    {{# } }}
</script>

<!-- 单据状态模板 -->
<script type="text/html" id="statusTpl">
    {{# if(d.documentStatus === '已确认'){ }}
        <span style="color: #5FB878;">已确认</span>
    {{# } else if(d.documentStatus === '草稿'){ }}
        <span style="color: #FFB800;">草稿</span>
    {{# } else { }}
        <span style="color: #FF5722;">{{d.documentStatus}}</span>
    {{# } }}
</script>

<!-- 班次操作列模板 -->
<script type="text/html" id="shiftOperationBar">
    <a class="layui-btn layui-btn-xs" lay-event="editShift">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteShift">删除</a>
</script>

<!-- 班组操作列模板 -->
<script type="text/html" id="teamOperationBar">
    <a class="layui-btn layui-btn-xs" lay-event="editTeam">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteTeam">删除</a>
</script>

<script>
layui.use(['form', 'table', 'layer', 'laydate'], function(){
    var form = layui.form;
    var table = layui.table;
    var layer = layui.layer;
    var laydate = layui.laydate;
    var $ = layui.$;

    // 初始化日期选择器
    laydate.render({
        elem: '#searchStartDate',
        type: 'date'
    });
    
    laydate.render({
        elem: '#searchEndDate',
        type: 'date'
    });



    // 初始化表格
    table.render({
        elem: '#shiftplanningTable',
        url: '/Shiftplanning/GetShiftplanningPageList', // 后端API接口
        method: 'get',
        request: {
            pageName: 'page',
            limitName: 'limit'
        },
        where: {},
        page: {
            curr: 1,
            limit: 10,
            limits: [5, 10, 15, 20],
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
        },
        toolbar: true,
        defaultToolbar: ['filter', 'exports', 'print'],
        parseData: function(res) {
            console.log('后端返回的数据:', res);
            return {
                "code": res.code,
                "msg": res.msg,
                "count": res.count,
                "data": res.data
            };
        },
        cols: [[
            {type: 'checkbox'},
            {field: 'id', title: 'ID', width: 80, hide: true},
            {field: 'planNumber', title: '计划编号', width: 150},
            {field: 'planName', title: '计划名称', width: 200},
            {field: 'teamType', title: '班组类型', width: 120, align: 'center'},
            {field: 'startTime', title: '开始日期', width: 120, align: 'center', templet: function(d){
                return new Date(d.startTime).toLocaleDateString();
            }},
            {field: 'endTime', title: '结束日期', width: 120, align: 'center', templet: function(d){
                return new Date(d.endTime).toLocaleDateString();
            }},
            {field: 'shiftWay', title: '轮班方式', width: 120, align: 'center'},
            {field: 'productionWay', title: '倒班方式', width: 120, align: 'center'},
            {field: 'documentStatus', title: '单据状态', width: 120, align: 'center', templet: '#statusTpl'},
            {title: '操作', toolbar: '#tableBar', width: 150, fixed: 'right'}
        ]],
        response: {
            statusCode: 0
        },
        text: {
            none: '暂无相关数据'
        },
        loading: true,
        done: function(res, curr, count) {
            console.log('表格渲染完成，当前页：', curr, '总数：', count);
        }
    });



    // 重置按钮点击事件
    $('#resetBtn').on('click', function(){
        $('#searchPlanCode').val('');
        $('#searchPlanName').val('');
        $('#searchStartDate').val('');
        $('#searchEndDate').val('');
        $('#searchShiftType').val('');
        form.render('select'); // 重新渲染select
        
        var loading = layer.load(1);
        table.reload('shiftplanningTable', {
            where: {},
            page: {
                curr: 1
            },
            done: function() {
                layer.close(loading);
                layer.msg('已重置搜索条件');
            }
        });
    });

    // 搜索框回车事件
    $('#searchPlanCode, #searchPlanName').on('keydown', function(e){
        if(e.keyCode === 13) {
            searchData();
        }
    });

    // 搜索按钮点击事件
    $('#searchBtn').on('click', function(){
        var planNumber = $('#searchPlanCode').val().trim();
        var planName = $('#searchPlanName').val().trim();
        var startTime = $('#searchStartDate').val().trim();
        var endTime = $('#searchEndDate').val().trim();
        var teamType = $('#searchShiftType').val();
        
        var whereCondition = {};
        if(planNumber) {
            whereCondition.planNumber = planNumber;
        }
        if(planName) {
            whereCondition.planName = planName;
        }
        if(startTime) {
            whereCondition.startTime = startTime;
        }
        if(endTime) {
            whereCondition.endTime = endTime;
        }
        if(teamType) {
            whereCondition.teamType = teamType;
        }
        
        console.log('搜索条件:', whereCondition);
        
        var loading = layer.load(1, {
            content: '正在搜索...'
        });
        
        table.reload('shiftplanningTable', {
            where: whereCondition,
            page: {
                curr: 1
            },
            done: function(res, curr, count) {
                layer.close(loading);
                if(count > 0) {
                    layer.msg(`搜索到 ${count} 条符合条件的记录`);
                } else {
                    layer.msg('未找到符合条件的记录', {icon: 2});
                }
            }
        });
    });

    // 新增按钮点击事件
    $('#addBtn').on('click', function(){
        openAddForm();
    });

    // 删除按钮点击事件
    $('#deleteBtn').on('click', function(){
        var checkStatus = table.checkStatus('shiftplanningTable');
        if(checkStatus.data.length === 0) {
            layer.msg('请选择要删除的数据', {icon: 2});
            return;
        }
        
        layer.confirm('确定要删除选中的数据吗？', {icon: 3, title:'提示'}, function(index){
            layer.msg('删除功能待实现', {icon: 0});
            layer.close(index);
        });
    });

    // 打开新增表单
    function openAddForm() {
        var content = `
            <div style="padding: 20px;">
                <form class="layui-form" lay-filter="addForm" id="addForm">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">计划编号 <span style="color: red;">*</span></label>
                                <div class="layui-input-block">
                                    <div style="display: flex; align-items: center; gap: 10px;">
                                        <input type="text" name="planNumber" id="planNumber" placeholder="系统自动生成" autocomplete="off" class="layui-input" readonly style="flex: 1; background-color: #f5f5f5;">
                                        <div class="auto-generate-switch active" onclick="toggleAutoGenerate()">
                                            <span class="switch-text">自动生成</span>
                                            <div class="switch-toggle active" id="autoGenerateToggle">
                                                <div class="switch-circle"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">计划名称 <span style="color: red;">*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="planName" placeholder="请输入计划名称" autocomplete="off" class="layui-input" lay-verify="required">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">开始日期 <span style="color: red;">*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="startTime" id="startTime" placeholder="请选择开始日期" autocomplete="off" class="layui-input" lay-verify="required">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">结束日期 <span style="color: red;">*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="endTime" id="endTime" placeholder="请选择结束日期" autocomplete="off" class="layui-input" lay-verify="required">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">班组类型 <span style="color: red;">*</span></label>
                                <div class="layui-input-block">
                                    <select name="teamType" lay-verify="required">
                                        <option value="">请选择班组类型</option>
                                        <option value="注塑">注塑</option>
                                        <option value="机加工">机加工</option>
                                        <option value="组装">组装</option>
                                        <option value="仓库">仓库</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">轮班方式</label>
                                <div class="layui-input-block">
                                    <div style="margin-top: 9px;">
                                        <input type="radio" name="shiftWay" value="白班" title="白班" checked>
                                        <input type="radio" name="shiftWay" value="两班倒" title="两班倒">
                                        <input type="radio" name="shiftWay" value="三班倒" title="三班倒">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">倒班方式</label>
                                <div class="layui-input-block">
                                    <select name="productionWay">
                                        <option value="">请选择倒班方式</option>
                                        <option value="按天">按天</option>
                                        <option value="按周">按周</option>
                                        <option value="按月">按月</option>
                                        <option value="按季度">按季度</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">单据状态</label>
                                <div class="layui-input-block">
                                    <select name="documentStatus">
                                        <option value="草稿" selected>草稿</option>
                                        <option value="已确认">已确认</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea name="descr" placeholder="请输入备注内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                </form>
            </div>
        `;

        layer.open({
            type: 1,
            title: '添加排班计划',
            area: ['900px', '700px'],
            content: content,
            btn: ['确定', '取消'],
            yes: function(index, layero) {
                // 获取表单数据
                var formData = form.val('addForm');
                console.log('表单数据:', formData);
                
                if (!formData.planName) {
                    layer.msg('请输入计划名称', {icon: 2});
                    return;
                }
                if (!formData.startTime) {
                    layer.msg('请选择开始日期', {icon: 2});
                    return;
                }
                if (!formData.endTime) {
                    layer.msg('请选择结束日期', {icon: 2});
                    return;
                }
                if (!formData.teamType) {
                    layer.msg('请选择班组类型', {icon: 2});
                    return;
                }

                // 转换数据格式
                var shiftplanningData = {
                    planNumber: formData.planNumber || '',
                    planName: formData.planName,
                    startTime: new Date(formData.startTime).toISOString(),
                    endTime: new Date(formData.endTime).toISOString(),
                    teamType: formData.teamType,
                    shiftWay: formData.shiftWay || '白班',
                    productionWay: formData.productionWay || '',
                    documentStatus: formData.documentStatus || '草稿',
                    descr: formData.descr || ''
                };

                var loading = layer.load(1);
                
                // 提交数据
                $.ajax({
                    url: '/Shiftplanning/AddShiftplanning',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(shiftplanningData),
                    success: function(response) {
                        layer.close(loading);
                        if (response.success) {
                            layer.msg(response.message, {icon: 1});
                            layer.close(index);
                            // 刷新表格
                            table.reload('shiftplanningTable');
                        } else {
                            layer.msg(response.message, {icon: 2});
                        }
                    },
                    error: function() {
                        layer.close(loading);
                        layer.msg('请求失败，请重试', {icon: 2});
                    }
                });
            },
            success: function(layero, index) {
                // 渲染表单
                form.render();
                
                // 初始化日期选择器
                laydate.render({
                    elem: '#startTime',
                    type: 'date'
                });
                
                laydate.render({
                    elem: '#endTime',
                    type: 'date'
                });

                // 自动生成状态
                var autoGenerateEnabled = true;

                // 生成计划编号的函数
                function generatePlanNumber() {
                    var now = new Date();
                    var year = now.getFullYear();
                    var month = String(now.getMonth() + 1).padStart(2, '0');
                    var day = String(now.getDate()).padStart(2, '0');
                    var hours = String(now.getHours()).padStart(2, '0');
                    var minutes = String(now.getMinutes()).padStart(2, '0');
                    var seconds = String(now.getSeconds()).padStart(2, '0');
                    
                    // 生成格式：PLAN + 年月日时分秒，例如：PLAN20250625143025
                    var planNumber = 'PLAN' + year + month + day + hours + minutes + seconds;
                    
                    // 设置到输入框
                    document.getElementById('planNumber').value = planNumber;
                    
                    return planNumber;
                }

                // 切换自动生成开关的函数
                window.toggleAutoGenerate = function() {
                    autoGenerateEnabled = !autoGenerateEnabled;
                    var toggle = document.getElementById('autoGenerateToggle');
                    var planInput = document.getElementById('planNumber');
                    
                    if (autoGenerateEnabled) {
                        toggle.classList.add('active');
                        // 立即生成一个计划编号
                        generatePlanNumber();
                        // 禁用输入框
                        planInput.readOnly = true;
                        planInput.style.backgroundColor = '#f5f5f5';
                    } else {
                        toggle.classList.remove('active');
                        // 启用输入框
                        planInput.readOnly = false;
                        planInput.style.backgroundColor = '';
                        // 清空输入框
                        planInput.value = '';
                        planInput.placeholder = '请输入计划编号';
                    }
                };

                // 初始化时生成一个编号
                generatePlanNumber();
            }
        });
    }

    // 表格工具条事件
    table.on('tool(shiftplanningTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'edit'){
            openEditForm(data.id);
        } else if(obj.event === 'delete'){
            layer.confirm('确定要删除这条记录吗？', {icon: 3, title:'提示'}, function(index){
                layer.msg('删除功能待实现', {icon: 0});
                layer.close(index);
            });
        }
    });

    // 打开编辑表单
    function openEditForm(id) {
        var loading = layer.load(1, {
            content: '正在加载数据...'
        });

        // 获取排班计划详情
        $.ajax({
            url: '/Shiftplanning/GetShiftplanningById',
            type: 'GET',
            data: { id: id },
            success: function(response) {
                layer.close(loading);
                if (response.success) {
                    showEditForm(response.data);
                } else {
                    layer.msg(response.message, {icon: 2});
                }
            },
            error: function() {
                layer.close(loading);
                layer.msg('获取数据失败，请重试', {icon: 2});
            }
        });
    }

    // 显示编辑表单
    function showEditForm(data) {
        var content = `
            <div style="padding: 20px;">
                <form class="layui-form" lay-filter="editForm" id="editForm">
                    <input type="hidden" name="id" value="${data.id}">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">计划编号 <span style="color: red;">*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="planNumber" value="${data.planNumber}" placeholder="请输入计划编号" autocomplete="off" class="layui-input" lay-verify="required">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">计划名称 <span style="color: red;">*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="planName" value="${data.planName}" placeholder="请输入计划名称" autocomplete="off" class="layui-input" lay-verify="required">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">开始日期 <span style="color: red;">*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="startTime" id="editStartTime" value="${new Date(data.startTime).toLocaleDateString()}" placeholder="请选择开始日期" autocomplete="off" class="layui-input" lay-verify="required">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">结束日期 <span style="color: red;">*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="endTime" id="editEndTime" value="${new Date(data.endTime).toLocaleDateString()}" placeholder="请选择结束日期" autocomplete="off" class="layui-input" lay-verify="required">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">班组类型 <span style="color: red;">*</span></label>
                                <div class="layui-input-block">
                                    <select name="teamType" lay-verify="required">
                                        <option value="">请选择班组类型</option>
                                        <option value="注塑" ${data.teamType === '注塑' ? 'selected' : ''}>注塑</option>
                                        <option value="机加工" ${data.teamType === '机加工' ? 'selected' : ''}>机加工</option>
                                        <option value="组装" ${data.teamType === '组装' ? 'selected' : ''}>组装</option>
                                        <option value="仓库" ${data.teamType === '仓库' ? 'selected' : ''}>仓库</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">轮班方式</label>
                                <div class="layui-input-block">
                                    <div style="margin-top: 9px;">
                                        <input type="radio" name="shiftWay" value="白班" title="白班" ${data.shiftWay === '白班' ? 'checked' : ''}>
                                        <input type="radio" name="shiftWay" value="两班倒" title="两班倒" ${data.shiftWay === '两班倒' ? 'checked' : ''}>
                                        <input type="radio" name="shiftWay" value="三班倒" title="三班倒" ${data.shiftWay === '三班倒' ? 'checked' : ''}>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">倒班方式</label>
                                <div class="layui-input-block">
                                    <select name="productionWay">
                                        <option value="">请选择倒班方式</option>
                                        <option value="按天" ${data.productionWay === '按天' ? 'selected' : ''}>按天</option>
                                        <option value="按周" ${data.productionWay === '按周' ? 'selected' : ''}>按周</option>
                                        <option value="按月" ${data.productionWay === '按月' ? 'selected' : ''}>按月</option>
                                        <option value="按季度" ${data.productionWay === '按季度' ? 'selected' : ''}>按季度</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">单据状态</label>
                                <div class="layui-input-block">
                                    <select name="documentStatus">
                                        <option value="草稿" ${data.documentStatus === '草稿' ? 'selected' : ''}>草稿</option>
                                        <option value="已确认" ${data.documentStatus === '已确认' ? 'selected' : ''}>已确认</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea name="descr" placeholder="请输入备注内容" class="layui-textarea">${data.descr || ''}</textarea>
                        </div>
                    </div>
                </form>
                
                <!-- 分割线 -->
                <hr style="margin: 20px 0; border: none; border-top: 1px solid #e6e6e6;">
                
                <!-- 标签页区域 -->
                <div class="layui-tab" lay-filter="shiftTabs">
                    <ul class="layui-tab-title">
                        <li class="layui-this">班次</li>
                        <li>班组</li>
                    </ul>
                    <div class="layui-tab-content">
                        <!-- 班次页面 -->
                        <div class="layui-tab-item layui-show">
                            <!-- 工具栏 -->
                            <div style="margin-bottom: 15px;">
                                <button type="button" class="layui-btn layui-btn-sm" id="addShiftBtn">
                                    <i class="layui-icon layui-icon-add-1"></i> 新增
                                </button>
                                <button type="button" class="layui-btn layui-btn-sm" id="saveShiftBtn">
                                    <i class="layui-icon layui-icon-ok"></i> 保存
                                </button>
                                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" id="deleteShiftBtn">
                                    <i class="layui-icon layui-icon-delete"></i> 删除
                                </button>
                            </div>
                            
                            <!-- 班次表格 -->
                            <table id="shiftDetailTable" lay-filter="shiftDetailTable"></table>
                        </div>
                        
                        <!-- 班组页面 -->
                        <div class="layui-tab-item">
                            <!-- 工具栏 -->
                            <div style="margin-bottom: 15px;">
                                <button type="button" class="layui-btn layui-btn-sm" id="addTeamBtn">
                                    <i class="layui-icon layui-icon-add-1"></i> 新增
                                </button>
                                <button type="button" class="layui-btn layui-btn-sm" id="saveTeamBtn">
                                    <i class="layui-icon layui-icon-ok"></i> 保存
                                </button>
                                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" id="deleteTeamBtn">
                                    <i class="layui-icon layui-icon-delete"></i> 删除
                                </button>
                            </div>
                            
                            <!-- 班组表格 -->
                            <table id="teamDetailTable" lay-filter="teamDetailTable"></table>
                        </div>
                    </div>
                </div>
            </div>
        `;

        layer.open({
            type: 1,
            title: '修改排班计划',
            area: ['900px', '700px'],
            content: content,
            btn: ['确定', '取消'],
            yes: function(index, layero) {
                // 获取表单数据
                var formData = form.val('editForm');
                console.log('编辑表单数据:', formData);
                
                if (!formData.planNumber) {
                    layer.msg('请输入计划编号', {icon: 2});
                    return;
                }
                if (!formData.planName) {
                    layer.msg('请输入计划名称', {icon: 2});
                    return;
                }
                if (!formData.startTime) {
                    layer.msg('请选择开始日期', {icon: 2});
                    return;
                }
                if (!formData.endTime) {
                    layer.msg('请选择结束日期', {icon: 2});
                    return;
                }
                if (!formData.teamType) {
                    layer.msg('请选择班组类型', {icon: 2});
                    return;
                }

                // 转换数据格式
                var shiftplanningData = {
                    id: parseInt(formData.id),
                    planNumber: formData.planNumber,
                    planName: formData.planName,
                    startTime: new Date(formData.startTime).toISOString(),
                    endTime: new Date(formData.endTime).toISOString(),
                    teamType: formData.teamType,
                    shiftWay: formData.shiftWay || '白班',
                    productionWay: formData.productionWay || '',
                    documentStatus: formData.documentStatus || '草稿',
                    descr: formData.descr || ''
                };

                var loading = layer.load(1);
                
                // 提交更新数据
                $.ajax({
                    url: '/Shiftplanning/UpdateShiftplanning',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(shiftplanningData),
                    success: function(response) {
                        layer.close(loading);
                        if (response.success) {
                            layer.msg(response.message, {icon: 1});
                            layer.close(index);
                            // 刷新表格
                            table.reload('shiftplanningTable');
                        } else {
                            layer.msg(response.message, {icon: 2});
                        }
                    },
                    error: function() {
                        layer.close(loading);
                        layer.msg('请求失败，请重试', {icon: 2});
                    }
                });
            },
            success: function(layero, index) {
                // 渲染表单
                form.render();
                
                // 初始化日期选择器
                laydate.render({
                    elem: '#editStartTime',
                    type: 'date'
                });
                
                laydate.render({
                    elem: '#editEndTime',
                    type: 'date'
                });

                // 使用element模块来管理标签页
                layui.use(['element'], function(){
                    var element = layui.element;
                    
                    // 监听标签页切换事件
                    element.on('tab(shiftTabs)', function(data){
                        console.log('切换到标签页：', data.index);
                    });
                });

                // 初始化班次表格
                table.render({
                    elem: '#shiftDetailTable',
                    url: '/Shift/GetShiftPageList',
                    method: 'get',
                    request: {
                        pageName: 'page',
                        limitName: 'limit'
                    },
                    page: {
                        curr: 1,
                        limit: 10,
                        limits: [5, 10, 15, 20],
                        layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh']
                    },
                    parseData: function(res) {
                        console.log('班次表格数据:', res);
                        return {
                            "code": res.code,
                            "msg": res.msg,
                            "count": res.count,
                            "data": res.data
                        };
                    },
                    cols: [[
                        {type: 'checkbox'},
                        {field: 'id', title: '序号', width: 80, align: 'center'},
                        {field: 'shiftName', title: '班次名称', width: 120, align: 'center'},
                        {field: 'startTime', title: '开始时间', width: 120, align: 'center', templet: function(d){
                            if (d.startTime) {
                                // 从DateTime对象中提取时间，使用本地时间
                                var date = new Date(d.startTime);
                                var hours = date.getHours().toString().padStart(2, '0');
                                var minutes = date.getMinutes().toString().padStart(2, '0');
                                return hours + ':' + minutes;
                            }
                            return '';
                        }},
                        {field: 'endTime', title: '结束时间', width: 120, align: 'center', templet: function(d){
                            if (d.endTime) {
                                // 从DateTime对象中提取时间，使用本地时间
                                var date = new Date(d.endTime);
                                var hours = date.getHours().toString().padStart(2, '0');
                                var minutes = date.getMinutes().toString().padStart(2, '0');
                                return hours + ':' + minutes;
                            }
                            return '';
                        }},
                        {title: '操作', toolbar: '#shiftOperationBar', width: 120, fixed: 'right'}
                    ]],
                    response: {
                        statusCode: 0
                    },
                    text: {
                        none: '暂无班次数据'
                    },
                    done: function(res, curr, count) {
                        console.log('班次表格渲染完成，当前页：', curr, '总数：', count);
                    }
                });

                // 初始化班组表格
                table.render({
                    elem: '#teamDetailTable',
                    data: [],
                    cols: [[
                        {type: 'checkbox'},
                        {field: 'teamCode', title: '班组编号', width: 150, align: 'center'},
                        {field: 'teamName', title: '班组名称', width: 200, align: 'center'},
                        {field: 'teamDesc', title: '备注', minWidth: 150},
                        {title: '操作', toolbar: '#teamOperationBar', width: 120, fixed: 'right'}
                    ]],
                    page: false,
                    limit: 10,
                    text: {
                        none: '暂无班组数据'
                    }
                });

                // 班次操作按钮事件
                $('#addShiftBtn').on('click', function(){
                    openAddShiftForm();
                });

                $('#saveShiftBtn').on('click', function(){
                    var checkStatus = table.checkStatus('shiftDetailTable');
                    if(checkStatus.data.length === 0) {
                        layer.msg('请先选择要保存的班次数据', {icon: 2});
                        return;
                    }
                    
                    layer.confirm('确定要保存选中的班次数据吗？', {icon: 3, title:'提示'}, function(index){
                        layer.msg('班次数据保存成功', {icon: 1});
                        layer.close(index);
                    });
                });

                $('#deleteShiftBtn').on('click', function(){
                    var checkStatus = table.checkStatus('shiftDetailTable');
                    if(checkStatus.data.length === 0) {
                        layer.msg('请选择要删除的班次', {icon: 2});
                        return;
                    }
                    
                    layer.confirm(`确定要删除选中的 ${checkStatus.data.length} 条班次记录吗？`, {icon: 3, title:'提示'}, function(index){
                        var loading = layer.load(1);
                        var deletePromises = [];
                        
                        checkStatus.data.forEach(function(item) {
                            var promise = $.ajax({
                                url: '/Shift/DeleteShift',
                                type: 'POST',
                                data: { id: item.id }
                            });
                            deletePromises.push(promise);
                        });
                        
                        Promise.all(deletePromises).then(function(responses) {
                            layer.close(loading);
                            var successCount = 0;
                            responses.forEach(function(response) {
                                if (response.success) {
                                    successCount++;
                                }
                            });
                            layer.msg(`成功删除 ${successCount} 条班次记录`, {icon: 1});
                            table.reload('shiftDetailTable');
                        }).catch(function() {
                            layer.close(loading);
                            layer.msg('删除失败，请重试', {icon: 2});
                        });
                        
                        layer.close(index);
                    });
                });

                // 班组操作按钮事件
                $('#addTeamBtn').on('click', function(){
                    openTeamSelectionDialog();
                });

                $('#saveTeamBtn').on('click', function(){
                    var checkStatus = table.checkStatus('teamDetailTable');
                    if(checkStatus.data.length === 0) {
                        layer.msg('请先选择要保存的班组数据', {icon: 2});
                        return;
                    }
                    
                    layer.confirm('确定要保存选中的班组数据吗？', {icon: 3, title:'提示'}, function(index){
                        layer.msg('班组数据保存成功', {icon: 1});
                        layer.close(index);
                    });
                });

                $('#deleteTeamBtn').on('click', function(){
                    var checkStatus = table.checkStatus('teamDetailTable');
                    if(checkStatus.data.length === 0) {
                        layer.msg('请选择要删除的班组', {icon: 2});
                        return;
                    }
                    
                    layer.confirm(`确定要删除选中的 ${checkStatus.data.length} 条班组记录吗？`, {icon: 3, title:'提示'}, function(index){
                        // 删除选中的班组记录
                        checkStatus.data.forEach(function(item) {
                            obj.del();
                        });
                        layer.msg('班组删除成功', {icon: 1});
                        layer.close(index);
                    });
                });

                // 监听班次表格操作
                table.on('tool(shiftDetailTable)', function(obj){
                    var data = obj.data;
                    if(obj.event === 'editShift'){
                        openEditShiftForm(data);
                    } else if(obj.event === 'deleteShift'){
                        layer.confirm('确定要删除班次 "' + data.shiftName + '" 吗？', function(index){
                            var loading = layer.load(1);
                            $.ajax({
                                url: '/Shift/DeleteShift',
                                type: 'POST',
                                data: { id: data.id },
                                success: function(response) {
                                    layer.close(loading);
                                    if (response.success) {
                                        layer.msg(response.message, {icon: 1});
                                        table.reload('shiftDetailTable');
                                    } else {
                                        layer.msg(response.message, {icon: 2});
                                    }
                                },
                                error: function() {
                                    layer.close(loading);
                                    layer.msg('删除失败，请重试', {icon: 2});
                                }
                            });
                            layer.close(index);
                        });
                    }
                });

                // 监听班组表格操作
                table.on('tool(teamDetailTable)', function(obj){
                    var data = obj.data;
                    if(obj.event === 'editTeam'){
                        layer.msg('修改班组：' + data.teamName);
                    } else if(obj.event === 'deleteTeam'){
                        layer.confirm('确定要删除班组 "' + data.teamName + '" 吗？', function(index){
                            obj.del();
                            layer.close(index);
                            layer.msg('删除成功');
                        });
                    }
                });

                // 打开新增班次表单
                function openAddShiftForm() {
                    var content = `
                        <div style="padding: 20px;">
                            <form class="layui-form" lay-filter="addShiftForm" id="addShiftForm">
                                <div class="layui-row">
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">序号</label>
                                            <div class="layui-input-block">
                                                <input type="number" name="id" id="shiftSequence" value="1" placeholder="请输入序号" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">班次名称 <span style="color: red;">*</span></label>
                                            <div class="layui-input-block">
                                                <input type="text" name="shiftName" placeholder="请输入班次名称" autocomplete="off" class="layui-input" lay-verify="required">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">开始时间 <span style="color: red;">*</span></label>
                                            <div class="layui-input-block">
                                                <input type="text" name="startTime" id="startTimeInput" placeholder="请选择开始时间" autocomplete="off" class="layui-input" lay-verify="required">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">结束时间 <span style="color: red;">*</span></label>
                                            <div class="layui-input-block">
                                                <input type="text" name="endTime" id="endTimeInput" placeholder="请选择结束时间" autocomplete="off" class="layui-input" lay-verify="required">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    `;

                    layer.open({
                        type: 1,
                        title: '添加班次',
                        area: ['500px', '300px'],
                        content: content,
                        btn: ['确定', '取消'],
                        yes: function(index, layero) {
                            // 获取表单数据
                            var formData = form.val('addShiftForm');
                            console.log('班次表单数据:', formData);
                            
                            if (!formData.shiftName) {
                                layer.msg('请输入班次名称', {icon: 2});
                                return;
                            }
                            if (!formData.startTime) {
                                layer.msg('请选择开始时间', {icon: 2});
                                return;
                            }
                            if (!formData.endTime) {
                                layer.msg('请选择结束时间', {icon: 2});
                                return;
                            }

                            // 直接发送时间字符串，让后端处理
                            var shiftData = {
                                shiftName: formData.shiftName,
                                startTime: formData.startTime, // 直接发送"08:00"
                                endTime: formData.endTime       // 直接发送"20:00"
                            };

                            var loading = layer.load(1);
                            
                            // 提交数据
                            $.ajax({
                                url: '/Shift/AddShift',
                                type: 'POST',
                                contentType: 'application/json',
                                data: JSON.stringify(shiftData),
                                success: function(response) {
                                    layer.close(loading);
                                    if (response.success) {
                                        layer.msg(response.message, {icon: 1});
                                        layer.close(index);
                                        // 刷新班次表格
                                        table.reload('shiftDetailTable');
                                    } else {
                                        layer.msg(response.message, {icon: 2});
                                    }
                                },
                                error: function() {
                                    layer.close(loading);
                                    layer.msg('请求失败，请重试', {icon: 2});
                                }
                            });
                        },
                        success: function(layero, index) {
                            // 渲染表单
                            form.render();
                            
                            // 初始化时间选择器
                            laydate.render({
                                elem: '#startTimeInput',
                                type: 'time',
                                format: 'HH:mm'
                            });
                            
                            laydate.render({
                                elem: '#endTimeInput',
                                type: 'time',
                                format: 'HH:mm'
                            });

                            // 自动设置序号
                            var tableData = table.cache['shiftDetailTable'];
                            if (tableData && tableData.length > 0) {
                                var maxId = Math.max.apply(Math, tableData.map(function(item) { return item.id || 0; }));
                                $('#shiftSequence').val(maxId + 1);
                            }
                        }
                    });
                }

                // 打开编辑班次表单
                function openEditShiftForm(data) {
                    var startTimeFormatted = '';
                    var endTimeFormatted = '';
                    
                    if (data.startTime) {
                        // 从DateTime对象中提取时间，使用本地时间而不是UTC
                        var startDate = new Date(data.startTime);
                        startTimeFormatted = startDate.getHours().toString().padStart(2, '0') + ':' + 
                                           startDate.getMinutes().toString().padStart(2, '0');
                    }
                    
                    if (data.endTime) {
                        // 从DateTime对象中提取时间，使用本地时间而不是UTC
                        var endDate = new Date(data.endTime);
                        endTimeFormatted = endDate.getHours().toString().padStart(2, '0') + ':' + 
                                         endDate.getMinutes().toString().padStart(2, '0');
                    }

                    var content = `
                        <div style="padding: 20px;">
                            <form class="layui-form" lay-filter="editShiftForm" id="editShiftForm">
                                <input type="hidden" name="id" value="${data.id}">
                                <div class="layui-row">
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">序号</label>
                                            <div class="layui-input-block">
                                                <input type="number" name="sequence" value="${data.id}" placeholder="请输入序号" autocomplete="off" class="layui-input" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">班次名称 <span style="color: red;">*</span></label>
                                            <div class="layui-input-block">
                                                <input type="text" name="shiftName" value="${data.shiftName}" placeholder="请输入班次名称" autocomplete="off" class="layui-input" lay-verify="required">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">开始时间 <span style="color: red;">*</span></label>
                                            <div class="layui-input-block">
                                                <input type="text" name="startTime" id="editStartTimeInput" value="${startTimeFormatted}" placeholder="请选择开始时间" autocomplete="off" class="layui-input" lay-verify="required">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">结束时间 <span style="color: red;">*</span></label>
                                            <div class="layui-input-block">
                                                <input type="text" name="endTime" id="editEndTimeInput" value="${endTimeFormatted}" placeholder="请选择结束时间" autocomplete="off" class="layui-input" lay-verify="required">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    `;

                    layer.open({
                        type: 1,
                        title: '修改班次',
                        area: ['500px', '300px'],
                        content: content,
                        btn: ['确定', '取消'],
                        yes: function(index, layero) {
                            // 获取表单数据
                            var formData = form.val('editShiftForm');
                            console.log('编辑班次表单数据:', formData);
                            
                            if (!formData.shiftName) {
                                layer.msg('请输入班次名称', {icon: 2});
                                return;
                            }
                            if (!formData.startTime) {
                                layer.msg('请选择开始时间', {icon: 2});
                                return;
                            }
                            if (!formData.endTime) {
                                layer.msg('请选择结束时间', {icon: 2});
                                return;
                            }

                            // 直接发送时间字符串，让后端处理
                            var shiftData = {
                                id: parseInt(formData.id),
                                shiftName: formData.shiftName,
                                startTime: formData.startTime, // 直接发送"08:00"
                                endTime: formData.endTime       // 直接发送"20:00"
                            };

                            var loading = layer.load(1);
                            
                            // 提交数据
                            $.ajax({
                                url: '/Shift/UpdateShift',
                                type: 'POST',
                                contentType: 'application/json',
                                data: JSON.stringify(shiftData),
                                success: function(response) {
                                    layer.close(loading);
                                    if (response.success) {
                                        layer.msg(response.message, {icon: 1});
                                        layer.close(index);
                                        // 刷新班次表格
                                        table.reload('shiftDetailTable');
                                    } else {
                                        layer.msg(response.message, {icon: 2});
                                    }
                                },
                                error: function() {
                                    layer.close(loading);
                                    layer.msg('请求失败，请重试', {icon: 2});
                                }
                            });
                        },
                        success: function(layero, index) {
                            // 渲染表单
                            form.render();
                            
                            // 初始化时间选择器
                            laydate.render({
                                elem: '#editStartTimeInput',
                                type: 'time',
                                format: 'HH:mm'
                            });
                            
                            laydate.render({
                                elem: '#editEndTimeInput',
                                type: 'time',
                                format: 'HH:mm'
                            });
                        }
                    });
                }

                // 打开班组选择弹窗
                function openTeamSelectionDialog() {
                    var content = `
                        <div style="padding: 20px;">
                            <!-- 搜索区域 -->
                            <div class="layui-form" lay-filter="teamSearchForm">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">班组编号</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="teamCode" placeholder="请输入班组编号" autocomplete="off" class="layui-input" id="searchTeamCode">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">班组名称</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="teamName" placeholder="请输入班组名称" autocomplete="off" class="layui-input" id="searchTeamName">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <button type="button" class="layui-btn" id="searchTeamBtn"><i class="layui-icon layui-icon-search"></i> 搜索</button>
                                        <button type="button" class="layui-btn layui-btn-primary" id="resetTeamBtn"><i class="layui-icon layui-icon-refresh"></i> 重置</button>
                                    </div>
                                </div>
                            </div>
                            <!-- 班组选择表格 -->
                            <table id="teamSelectionTable" lay-filter="teamSelectionTable"></table>
                        </div>
                    `;

                    layer.open({
                        type: 1,
                        title: '班组选择',
                        area: ['800px', '600px'],
                        content: content,
                        btn: ['确定', '取消'],
                        yes: function(index, layero) {
                            var checkStatus = table.checkStatus('teamSelectionTable');
                            if(checkStatus.data.length === 0) {
                                layer.msg('请选择要添加的班组', {icon: 2});
                                return;
                            }
                            
                            // 添加选中的班组到班组列表
                            var teamTableData = table.cache['teamDetailTable'] || [];
                            checkStatus.data.forEach(function(teamItem) {
                                // 检查是否已存在
                                var exists = teamTableData.some(function(existingItem) {
                                    return existingItem.teamCode === teamItem.teamCode;
                                });
                                
                                if (!exists) {
                                    teamTableData.push({
                                        id: teamItem.id,
                                        teamCode: teamItem.teamCode,
                                        teamName: teamItem.teamName,
                                        teamDesc: teamItem.teamDesc
                                    });
                                }
                            });
                            
                            // 重新渲染班组表格
                            table.reload('teamDetailTable', {
                                data: teamTableData
                            });
                            
                            layer.msg(`成功添加 ${checkStatus.data.length} 个班组`, {icon: 1});
                            layer.close(index);
                        },
                        success: function(layero, index) {
                            // 渲染表单
                            form.render();
                            
                            // 初始化班组选择表格
                            table.render({
                                elem: '#teamSelectionTable',
                                url: '/Team/GetTeamPageList',
                                method: 'get',
                                request: {
                                    pageName: 'page',
                                    limitName: 'limit'
                                },
                                page: {
                                    curr: 1,
                                    limit: 10,
                                    limits: [5, 10, 15, 20],
                                    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh']
                                },
                                parseData: function(res) {
                                    console.log('班组选择表格数据:', res);
                                    return {
                                        "code": res.code,
                                        "msg": res.msg,
                                        "count": res.count,
                                        "data": res.data
                                    };
                                },
                                cols: [[
                                    {type: 'checkbox'},
                                    {field: 'teamCode', title: '班组编号', width: 150, align: 'center'},
                                    {field: 'teamName', title: '班组名称', width: 200, align: 'center'},
                                    {field: 'teamDesc', title: '备注', minWidth: 150}
                                ]],
                                response: {
                                    statusCode: 0
                                },
                                text: {
                                    none: '暂无班组数据'
                                },
                                done: function(res, curr, count) {
                                    console.log('班组选择表格渲染完成，当前页：', curr, '总数：', count);
                                }
                            });

                            // 搜索按钮事件
                            $('#searchTeamBtn').on('click', function(){
                                var teamCode = $('#searchTeamCode').val().trim();
                                var teamName = $('#searchTeamName').val().trim();
                                
                                var whereCondition = {};
                                if(teamCode) {
                                    whereCondition.teamCode = teamCode;
                                }
                                if(teamName) {
                                    whereCondition.teamName = teamName;
                                }
                                
                                table.reload('teamSelectionTable', {
                                    where: whereCondition,
                                    page: {
                                        curr: 1
                                    }
                                });
                            });

                            // 重置按钮事件
                            $('#resetTeamBtn').on('click', function(){
                                $('#searchTeamCode').val('');
                                $('#searchTeamName').val('');
                                
                                table.reload('teamSelectionTable', {
                                    where: {},
                                    page: {
                                        curr: 1
                                    }
                                });
                            });
                        }
                    });
                }
            }
        });
    }
});
</script>
</body>
</html>
